<template> 
	<div class="app-container">
		<el-card class="filter-container" shadow="never">
			<div>
				<i class="el-icon-search"></i>
				<span>查询发起人信息</span>
				<el-button style="float: right" @click="handleSearchList()" type="primary" size="small">
					查询结果
				</el-button>
			</div>
			<div style="margin-top: 15px">
				<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
					<el-form-item label="输入id：">
						<el-input style="width: 203px" v-model="userId" placeholder="发起人id"></el-input>
					</el-form-item>
				</el-form>
			</div>
		</el-card>
		
		<div class="table-container">
			<el-table ref="groupTable" :data="list" style="width: 100%" @selection-change="handleSelectionChange" v-loading="listLoading"
			 border>
				<el-table-column type="selection" width="60" align="center"></el-table-column>
				<el-table-column label="编号" align="center" width="100">
					<template slot-scope="scope">{{scope.row.id}}</template>
				</el-table-column>
				<el-table-column label="发起人id" align="center">
					<template slot-scope="scope">{{scope.row.memberId || '无'}}</template>
				</el-table-column>
				<el-table-column label="发起人账号" align="center" width="260">
					<template slot-scope="scope">{{scope.row.objName || '无'}}</template>
				</el-table-column>
				<el-table-column label="类型" align="center">
					<template slot-scope="scope">{{scope.row.withDrawType | gettype}}</template>
				</el-table-column>
				<el-table-column label="金额" align="center">
					<template slot-scope="scope">{{scope.row.price}}</template>
				</el-table-column>
				<!-- 	<el-table-column label="凭证图片" align="center">
					<template slot-scope="scope"><img style="height: 220px" :src="scope.row.pic"></template>
				</el-table-column> -->
				<el-table-column label="状态" align="center" width="150">
					<template slot-scope="scope">{{scope.row.status | getStatus}}</template>
				</el-table-column>
				<el-table-column label="提交时间" align="center" width="250">
					<template slot-scope="scope">{{scope.row.createTime | formatCreateTime}}</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="190">
					<template slot-scope="scope">
						<el-button size="mini" type="text" @click="handleUpdate(scope.$index, scope.row)" style="width: 60px;background-color: #C03327;color:#FFFFFF;">通过
						</el-button>
						<el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)" style="width: 60px;background-color: #C03327;color:#FFFFFF;">驳回
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		
		<el-dialog title="发起人信息" :visible.sync="vertyProduct.dialogVisible" width="40%">
			<el-table style="width: 100%;margin-top: 20px" :data="vertyProduct.list" border>
				<el-table-column label="账号姓名" width="160" align="center">
					<template slot-scope="scope">{{scope.row.accountName}}</template>
				</el-table-column>
				<el-table-column label="账号" width="160" align="center">
					<template slot-scope="scope">{{scope.row.cardNumber}}</template>
				</el-table-column>
				<el-table-column label="提现方式" width="160" align="center">
					<template slot-scope="scope">{{scope.row.cardType | gettype}}</template>
				</el-table-column>
				<!-- <el-table-column label="审核时间" width="160" align="center">
					<template slot-scope="scope">{{scope.row.createTime|formatTime}}</template>
				</el-table-column> -->
			</el-table>
		</el-dialog>
		
		<div class="batch-operate-container">
			<el-select size="small" v-model="operateType" placeholder="批量操作">
				<el-option v-for="item in operates" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<el-button style="margin-left: 20px" class="search-button" @click="handleBatchOperate()" type="primary" size="small">
				确定
			</el-button>
		</div>
		<div class="pagination-container">
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes,prev, pager, next,jumper"
			 :page-size="listQuery.pageSize" :page-sizes="[10,15,50]" :current-page.sync="listQuery.pageNum" :total="total">
			</el-pagination>
		</div>
	</div>
</template>
<script>
	import {
		amountList,
		updateAmount,
		getBankList
	} from '@/api/sms/group'
	import {
		formatDate
	} from '@/utils/date';
	export default {
		name: 'groupList',
		data() {
			return {
				operates: [{
						label: "通过",
						value: "showGroup"
					},
					{
						label: "驳回",
						value: "hideGroup"
					}
				],
				verifyStatusOptions: [{
					value: 0,
					label: '未审核'
				}, {
					value: 1,
					label: '以通过'
				}, {
					value: 2,
					label: '以驳回'
				}],
				vertyProduct: {
					dialogVisible: false,
					productId: null,
					detail: '',
					verifyStatus: null,
					list: null
				},
				operateType: null,
				listQuery: {
					pageNum: 1,
					pageSize: 10,
					type: 8
				},
				list: null,
				total: null,
				listLoading: true,
				multipleSelection: [],
				// 发起人id
				userId:''
			}
		},
		created() {
			this.getList();
		},
		filters: {
			formatCreateTime(time) {
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
			},
			getStatus(status) {
				if (status == 0) {
					return '待审核'
				} else if (status == 2) {
					return '已通过'
				} else if (status == 4) {
					return '已驳回'
				}
			},
			gettype(type) {
				if (type == 1) {
					return '支付宝'
				} else if (type == 2) {
					return '微信'
				}
			},
		},
		methods: {
			// 查询
			handleSearchList(){
				if(this.userId == ''){
					this.$message({
						message:'请输入发起人id',
						type: 'warning',
						duration: 2000
					});
					return 
				}
				let psrams = {
					userId: this.userId
				}
				getBankList(psrams).then(res =>{
					this.vertyProduct.list = res.data
					this.vertyProduct.dialogVisible = true;
				})
			},
			// 获取数据
			getList() {
				this.listLoading = true;
				amountList(this.listQuery).then(response => {
					this.listLoading = false;
					this.list = response.data.records;
					this.total = response.data.total;
					this.totalPage = response.data.pages;
					this.pageSize = response.data.size;
				});
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			// 审核通过
			handleUpdate(index, row) {
				let params = {
					ids: row.id,
					status: 2
				}
				updateAmount(params).then(response => {
					this.$message({
						message: response.msg,
						type: 'success',
						duration: 1000
					});
					this.getList();
				});
			},
			// 驳回
			handleDelete(index, row) {
				let params = {
					ids: row.id,
					status: 4
				}
				updateAmount(params).then(response => {
					this.$message({
						message: response.msg,
						type: 'success',
						duration: 1000
					});
					this.getList();
				});
			},


			handleSizeChange(val) {
				this.listQuery.pageNum = 1;
				this.listQuery.pageSize = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val;
				this.getList();
			},
			searchGroupList() {
				this.listQuery.pageNum = 1;
				this.getList();
			},
			handleBatchOperate() {
				console.log(this.multipleSelection);
				let status
				if (this.multipleSelection < 1) {
					this.$message({
						message: '请选择一条记录',
						type: 'warning',
						duration: 1000
					});
					return;
				}
				if (this.operateType === 'showGroup') {
					status = 2;
				} else if (this.operateType === 'hideGroup') {
					status = 4;
				} else {
					this.$message({
						message: '请选择批量操作类型',
						type: 'warning',
						duration: 1000
					});
					return;
				}
				let ids = [];
				for (let i = 0; i < this.multipleSelection.length; i++) {
					ids.push(this.multipleSelection[i].id);
				}
				let data = new URLSearchParams();
				data.append("ids", ids);
				data.append("status", status);
				updateAmount(data).then(response => {
					this.getList();
					this.$message({
						message: '修改成功',
						type: 'success',
						duration: 1000
					});
				});
			},
			addGroup() {
				this.$router.push({
					path: '/sms/addGroup'
				})
			}
		}
	}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>


</style>
